<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
	<style>
*{
	margin:100px;
	padding:0;
}
	.item img{
		width:200px;
		vertical-align:bottom;
		float:left;
		padding:10px;
		
		margin:8px;

	}
	.item{
		position:absolute;
		/*border:1px solid red;*/

	}
	#box{
		position:relative;
		margin:0 auto;
	}
	</style>
	<script src="js/ajax.js"></script>
	<script type="text/javascript" src="js/Tween.js" ></script>
	<script type="text/javascript" src="js/time_move.js" ></script>
	<script type="text/javascript">
	
	var bstop=true;
onload=function(){
	 clientwidth=document.documentElement.clientWidth;
	clientheight=document.documentElement.clientHeight; 
	// console.log(clientwidth)
	var oimg=document.getElementsByTagName('img')[0];
	 arr = [];

	 imgwidth=oimg.offsetWidth;
	// console.log(imgwidth)
	var num=Math.floor(clientwidth/imgwidth);
	// console.log(num)
	 var box=document.getElementById('box');
	var boxwidth=num*imgwidth;
	box.style.width=boxwidth+'px';
	// console.log(boxwidth)
	oitem=getclass(box,"item");
	
	// console.log(oitem)
		for(var i=0;i<oitem.length;i++){
			// console.log(i)
			if(i<num){
				oitem[i].style.left=i*imgwidth+"px";
				oitem[i].style.top=0+"px";
				
				arr.push(oitem[i].offsetHeight)
				// console.log(columnHeight)
			}else{

					 min=Math.min.apply(false,arr);
					getI();
					oitem[i].style.left=n*imgwidth+"px";
					oitem[i].style.top=min+"px";
					arr[n]+=oitem[i].offsetHeight;


			}

		}








}
	// window.onscroll=function(){
	// 	var lastitem=oitem[oitem.length-1];
	// 	scroll=document.documentElement.scrollTop||document.body.scrollTop;
	// 	if(bstop && clientheight+scroll>=(lastitem.offsetHeight/2+lastitem.offsetTop)){
	// 		bstop=false;
	// 		ajax({
	// 			url:'http://localhost/waterfall.php',
	// 			fn:function(response){
	// 				var alist=JSON.parse(response);
	// 				alist.forEach(function(v,k){
	// 					min=Math.min.apply(false,arr);
	// 					getI();
	// 				var Img=document.createElement('img');
	// 					Img.src=v.url;
	// 					Img.style.height=imgwidth*v.height/v.width;
	// 					var oitem=document.createElement('div');
	// 					oitem.className='item';
	// 					oitem.appendChild(Img);
	// 					box.appendChild(oitem);
	// 					oitem.style.left=getI()*+imgwidth+'px';
	// 					oitem.style.top=min+'px';
	// 					arr[n]+=oitem.offsetHeight;


	// 				})
	// 				var iitem=get(box,'item')
	// 				bstop=false;
	// 				console.log(alist);

	// 			}
	// 		})

	// 	}

	// }
	window.onresize=function(){
		 var clientwidth=document.documentElement.clientWidth;
		var clientheight=document.documentElement.clientHeight;
		// console.log(clientwidth)
		 var num=Math.floor(clientwidth/imgwidth);
		 var box=document.getElementById('box');
		var boxwidth=num*imgwidth;
		box.style.width=boxwidth+'px';
		 // console.log(num)
		 var arr=[];
		 for(var i=0;i<oitem.length;i++){
			// console.log(i)
			if(i<num){
				oitem[i].style.left=i*imgwidth+"px";
				oitem[i].style.top=0+"px";
				
				arr.push(oitem[i].offsetHeight)
				// console.log(columnHeight)
			}else{

					 min=Math.min.apply(false,arr);
					getI();
					// oitem[i].style.left=n*imgwidth+"px";
					// oitem[i].style.top=min+"px";
					timeMove(oitem[i],{"left":n*imgwidth,"top":min},Tween.Quad.easeInOut,500,function(){
									console.log("ok");
								})
					arr[n]+=oitem[i].offsetHeight;


			}

		}



	}



	function getI(){
			for(var i=0;i<arr.length;i++){
					if(arr[i]==min){
						n=i;
						break;
					}
					
					
				}
			return n;

		}


	
	function getclass(obj,oclass){
		var tt=obj.getElementsByTagName("*");
		var temp=[];

		for(var i=0;i<tt.length;i++){
			if(tt[i].className==oclass){
				temp.push(tt[i]);
			}

		}
		return temp;

	}





	</script>
</head>
<body>
	<div id="box">
		
	
	<div class="item">
		<img src="images5/1.jpg" />		
	</div>
	<div class="item">
		<img src="images5/2.jpg" />		
	</div>
	<div class="item">
		<img src="images5/3.jpg" />		
	</div>
	<div class="item">
		<img src="images5/4.jpg"/>		
	</div>
	<div class="item">
		<img src="images5/5.jpg" />		
	</div>
	<div class="item">
		<img src="images5/6.jpg" />		
	</div>
	<div class="item">
		<img src="images5/7.jpg"/>		
	</div>
	<div class="item">
		<img src="images5/8.jpg" />		
	</div>
	<div class="item">
		<img src="images5/9.jpg" />		
	</div>
	<div class="item">
		<img src="images5/10.jpg" />		
	</div>

	<div class="item">
		<img src="images5/11.jpg" />		
	</div>
	<div class="item">
		<img src="images5/12.jpg" />		
	</div>
	<div class="item">
		<img src="images5/13.jpg" />		
	</div>
	<div class="item">
		<img src="images5/14.jpg"/>		
	</div>
	<div class="item">
		<img src="images5/15.jpg" />		
	</div>
	<div class="item">
		<img src="images5/16.jpg" />		
	</div>
	<div class="item">
		<img src="images5/17.jpg" />		
	</div>
	<div class="item">
		<img src="images5/18.jpg" />		
	</div>
	<div class="item">
		<img src="images5/19.jpg" />		
	</div>
	<div class="item">
		<img src="images5/20.jpg"/>		
	</div>


	</div>
</body>
</html>